
import './styles.css';
import React, { useState } from 'react';

interface CartItemProps {
  id: number;
  name: string;
  price: number;
  quantity: number;
  image: string;
  origin: string;
  specifications: string;
  onSelect: (id: number) => void;
  onDeselect: (id: number) => void;
  onPriceChange: (id: number, newPrice: number) => void;
  onQuantityChange: (id: number, newQuantity: number) => void;
  selected: boolean;
}

const CartItem: React.FC<CartItemProps> = ({
  id,
  name,
  price,
  quantity,
  image,
  origin,
  specifications,
  onSelect,
  onDeselect,
  onPriceChange,
  onQuantityChange,
  selected,
}) => {
  const [localPrice, setLocalPrice] = useState(price);
  const [localQuantity, setLocalQuantity] = useState(quantity);

  const handleSelectChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.checked) {
      onSelect(id);
    } else {
      onDeselect(id);
    }
  };

  const handlePriceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newPrice = parseFloat(e.target.value);
    setLocalPrice(newPrice);
    onPriceChange(id, newPrice);
  };

  const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newQuantity = parseInt(e.target.value, 10);
    setLocalQuantity(newQuantity);
    onQuantityChange(id, newQuantity);
  };

  return (
    <div className="cart-item">
      <input
        type="checkbox"
        checked={selected}
        onChange={handleSelectChange}
      />
      <img src={image} alt={name} className="cart-item-image" />
      <div className="cart-item-details">
        <h3>{name}</h3>
        <p>Price: <input type="number" value={localPrice} onChange={handlePriceChange} /></p>
        <p>Quantity: <input type="number" value={localQuantity} onChange={handleQuantityChange} /></p>
        <p>Origin: {origin}</p>
        <p>Specifications: {specifications}</p>
      </div>
    </div>
  );
};

export default CartItem;
